<template>
	<view class="warp" :style="{ minHeight: screenHeight + 'px' }">
		<view class="head" v-if="detailData.is_pay==0">
			<text class="status">{{detailData.status}}</text>
			<text class="time" v-if="detailData.sp_time!=0"><u-count-down :timestamp="detailData.sp_time"></u-count-down>后取消订单</text>
			<view class="head_btn" v-if="detailData.sp_time!=0">
				<view class="flexs" @click.stop="gosbumit(1,detailData.order_id)">
					取消交易
				</view>
				<view class="flexs" @click.stop="gosbumit(2,detailData.order_id)">
					立即支付
				</view>
			</view>
		</view>
		<!-- <view class="dw_bom">
			<image src="https://pd.pdaxiang.com/upload/static/user/odbom.png"></image>
		</view>
		<view class="address-wrap" >
			<view class="top">
				<view class="top_left">
					<image src="https://pd.pdaxiang.com/upload/static/user/dizhi.png" mode=""></image>
					<text class="name">{{detailData.name}}</text>
					<text class="mobile">{{detailData.mobile}}</text>
				</view>
				<view class="address">{{detailData.address}}{{detailData.city}}{{detailData.area}}</view>
			</view>
		</view>
		<view class="dw_bom">
			<image src="https://pd.pdaxiang.com/upload/static/user/odbom.png"></image>
		</view> -->
		<view class="goods-wrap" v-for="(item,index) in detailData.goods_list" :key="index">
			<view class="goods" style="padding-top: 20rpx;"  @click="goGoods(item.goods_id)">
				<view class="img">
					<image :src="item.goods_pic" mode="aspectFit"></image>
				</view>
				<view class="info">
					<text class="name">{{item.goods_name}}</text>
					<view class="box_num">
						<view class="box_num_left">
							"<text class="guige" v-for="(it,arri) in item.attr" :key="arri">{{it.attr_name}}</text>"
						</view>
						<text class="number">数量 &nbsp;x{{item.num}}</text>
					</view>
					<view class="box_chima">
						<text class="guige"></text>
						<!-- <text class="price">￥{{item.total_price}}</text> -->
					</view>
				</view>
			</view>
			<view class="other">
				<view class="pay_price">
					实付：
					<text >￥{{detailData.pay_price}}</text>
				</view>
				<!-- <view class="jifen" v-if="false">下单成功获得44点积分</view> -->
			</view>
		</view>

		<view class="order-wrap">
			<view class="tit">订单信息</view>
			<view class="block">
				<text class="txt">订单编号：</text>
				<text>{{ detailData.order_no }}</text> 
				<!-- <text class="fuz" @click="fuz(detailData.order_no)">复制</text> -->
			</view>
			<view class="block">
				<text class="txt">下单时间：</text>
				<text>{{ detailData.create_time }}</text>
			</view>
			<view class="block">
				<text class="txt">支付方式：</text>
				<text>{{detailData.pay_type}}</text>
			</view>
			<view class="block">
				<text class="txt">支付时间：</text>
				<text>{{ detailData.pay_time }}</text>
			</view>
			<!-- <view class="block">
				<text class="txt">运费：</text>
				<text v-if="detailData.express_price==0">免运费</text>
				<text v-else>{{detailData.express_price}}</text>
			</view> -->
		</view>
		<!-- <view class="order-wrap">
			<view class="tit">物流信息</view>
			<view class="block">
				<text class="txt">物流公司：{{detailData.express}}</text>
			</view>
			<view class="block">
				<text class="txt">物流编号:{{detailData.express_no}}</text>
			</view>
		</view> -->
		
		<u-popup v-model="payshow" mode="center" border-radius="20" :closeable="true">
			<view class="popup">
				<view class="popsec">
					<view class="toptwo" @click="fukuancheck(3)" v-if="walletData.yuanshi_pay_status=='on'">
						<view class="left">
							<image :src="iconurl + '/static/mall/wx.png'" mode=""></image>
							<text>大王币</text>
						</view>
						<image :src=" iconurl + '/static/index/pzselect1.png'" v-if="ptype != 3" ></image>
						<image :src=" iconurl + '/static/user/lchecks.png'" v-if="ptype == 3" ></image>
					</view>
				</view>
				<view class="popfoot" @click="opensubmit"><text>确定</text></view>
			</view>
		</u-popup>
		<u-modal v-model="quxiaoStatus" content="确定取消交易吗?" :show-cancel-button="true" @confirm="payConfirm_quxiao"></u-modal>
		<u-popup mode="center" v-model="urlpayStatus">
			<view class="webcenter">
				<!-- <web-view  :src="payurl" style="width: 400rpx;height: 400rpx;"></web-view> -->
				结算
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			payurl:"",
			order_id:"",
			getjieguodingshi:null,
			urlpayStatus:false,
			ptype:1,
			payshow:false,
			quxiaoStatus:false,
			screenHeight: '',
			info: {},
			timestamp: 0,
			goods_list: [],
			detailData:{},
			walletData:{},//余额
			iconurl:this.$configs.urls
		};
	},
	onLoad(option) {
		this.order_id = option.order_id
		uni.getSystemInfo({
			success: res => {
				this.screenHeight = res.windowHeight;
			}
		});
		// this.orderDetail({
		// 	order_id: option.order_id
		// });
	},
	onShow() {
		this.getlist()
		this.getwallet()//钱包
	},
	methods: {
		getwallet(){
			this.$Request.get(this.$api.user.wallet).then(res => {
				this.walletData = res.data
				if(res.data.yuanshi_pay_status=='on'){
					this.ptype = 3
					return;
				}
			});
		},
		getjieguo(){
			let data = {
				order_id:this.order_id
			}
			this.$Request.get(this.$api.index.payResult,data).then(res => {
				if(res.data.is_pay==1){
					clearInterval(this.getjieguodingshi)
					this.urlpayStatus = false;
					setTimeout(()=>{
						this.payshow = false;
						uni.navigateBack({
							delta:1
						})
					},800)
					 clearTimeout();
				}
			});
		},
		//选择收货地址
		diycity() {
			uni.navigateTo({
				url: '/userPage/user/address/address?type=1'
			});
		},
		payConfirm_quxiao(){
			let data = {
				order_id:this.order_id,
			}
			this.$Request.get(this.$api.mall.cancel,data).then(res => {
				uni.showToast({
					title:res.msg,
					icon:"none"
				})
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1000)
				 clearTimeout();
			});
		},
		gosbumit(is,order_id){
			this.order_id = order_id
			if(is==1){
				//取消交易
				this.quxiaoStatus = true;
			}else{
				//支付
				this.payshow = true;
			}
		},
		tuihuo(item){
			////console.log(item)
			uni.navigateTo({
				url:"/pages/fenlei/aRefund?goodslist=" + JSON.stringify(item)
			})
		},
		//确定支付
		opensubmit(){
			let data = {
				order_id: this.order_id,
				pay_type:this.ptype
			};
			this.$Request.get(this.$api.mall.payData, data).then(res => {
				this.payurl = res.data.pay_data
				this.order_id = res.data.order_id
				if(this.ptype==4){
					this.urlpayStatus = true;
					this.getjieguodingshi = setInterval(()=>{
						this.getjieguo()
					},3000)
					return
				}
				let provider = ''
				if(this.ptype==1){
					provider = 'wxpay'
				}else{
					provider = 'alipay'
				}
				////console.log(res)
				//调用支付
				this.apipay(res.data.order_no,res.data.pay_data)
			});
		},
		apipay(order_no,orderInfo){
			let pay_id = '';
			let provider = '';
			if (this.ptype == 2) {
				pay_id = 1;
				provider = "alipay";
			} else {
				pay_id = 2;
				provider = "wxpay";
			}
			let data = {
				order_no:order_no,
				pay_id:pay_id
			}
			////console.log(11,data)
			// pay(data).then(res => {
				//调用支付
				uni.requestPayment({
					provider: provider,
					orderInfo: orderInfo,
					success(res) {
						////console.log(res)
						// //存入下标作为进入我的订单状态
						// uni.setStorageSync('jumpTo', 2);
						this.payshow = false;
						uni.navigateBack({
							delta:1
						})
					},
					fail(res) {
						////console.log(res);
					}
				});
			// });
		},
		fukuancheck(ptype){
			this.ptype = ptype;
		},
		getlist(){
			let data = {
				order_id: this.order_id
			};
			this.$Request.get(this.$api.mall.orderdetail, data).then(res => {
				this.detailData = res.data
				if(this.detailData.is_cancel==0 && this.detailData.is_pay==0 && this.detailData.sp_time==0){
					let data = {
						order_id:this.order_id,
					}
					this.$Request.get(this.$api.mall.cancel,data).then(res => {
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1000)
						 clearTimeout();
					});
				}
			});
		},
		goWuliu(order_id, pic) {
			uni.navigateTo({
				url: '/pages/order/wuliu?order_id=' + order_id + '&pic=' + pic
			});
		},
		shouhou(order_detail_id) {
			uni.navigateTo({
				url: '/pagesA/pages/order/returnGoods?order_detail_id=' + order_detail_id
			});
		},
		goFukuan() {
			this.payshow = true;
		},
		fuz(order_no) {
			uni.setClipboardData({
				data: order_no,
				success: res => {
					uni.showToast({
						icon: 'none',
						duration: 500,
						title: '复制成功！'
					});
				}
			});
		},
		goGoods(goods_id) {
			uni.navigateTo({
				url:"/mallPage/mall/goodsdetail?goods_id=" + goods_id
			})
		},

		goEvaluate() {
			uni.navigateTo({
				url: '/pagesA/pages/order/evaluate?order_id=' + this.info.order_id
			});
		},
		goReturn(goodsId) {
			uni.navigateTo({
				url: './returnGoods?goodsId=' + goodsId
			});
		},
		//确认收货
		confirm(order_id) {
			this.Shouhuoshow = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.popup {
			height: 584rpx;
			width: 640rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.delete {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				right: 20rpx;
				top: 20rpx;
			}
			.popfoot {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 486rpx;
				height: 80rpx;
				background: #6792DD;
				opacity: 1;
				border-radius: 40rpx;
				margin-top: 100rpx;
				color: #ffffff;
			}
			.popsec {
				width: 100%;
				display: flex;
				flex-direction: column;
				margin-top: 60rpx;
				padding-right: 40rpx;
				padding-left: 60rpx;
				.topone {
					width: 610rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					image {
						width: 46rpx;
						height: 46rpx;
						margin-right: 30rpx;
						position: relative;
						top: 12upx;
					}
					text {
						color: #999999;
						font-size: 34rpx;
					}
				}
				.toptwo {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 28rpx;
					image {
						width: 46rpx;
						height: 46rpx;
						margin-right: 30rpx;
						position: relative;
						top: 12upx;
					}
					text {
						color: #999999;
						font-size: 34rpx;
					}
				}
			}
		}
.warp {
	background: #FFFFFF;
}

.head {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	padding: 10rpx;
	.status {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-top: 10rpx;
	}
	.time{
		font-size: 24rpx;
		color: #000;
	}
	.head_btn{
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
		margin-bottom: 58rpx;
		view{
			width: 163rpx;
			height: 54rpx;
			background: #999999;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			border-radius: 100rpx;
		}
		view:nth-child(2){
			background: #6792DD;
			margin-left: 50rpx;
		}
	}
}
.dw_bom {
	width: 710rpx;
	margin: 0 auto;
	margin-top: -20rpx;
	image{
		width: 710rpx;
		height: 8rpx;
	}
}	
.address-wrap {
	width: 710rpx;
	margin: 0 auto;
	background: #fff;
	padding: 27rpx 20rpx 18rpx 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.top {
		font-size: 28rpx;
		color: #333;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		.top_left {
			image {
				width: 50rpx;
				height: 50rpx;
				vertical-align: middle;
			}

			.name {
				padding: 0 27rpx 0 15rpx;
			}
		}
	}

	.address {
		padding-top: 18rpx;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #333333;
	}
}

.goods-wrap {
	width: 710rpx;
	margin: 0 auto;
	background: #fff;
	margin: 20rpx;
	box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.16);
	border-radius: 20rpx;
	.shop {
		color: #333;
		font-size: 30rpx;
		line-height: 42rpx;
		padding: 24rpx 20rpx 30rpx 20rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			vertical-align: middle;
			margin-right: 8rpx;
		}
	}

	.goods {
		display: flex;
		padding: 0 20rpx 32rpx 20rpx;

		.img {
			width: 260rpx;
			height: 260rpx;
			border-radius: 10rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.info {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			padding: 0 20rpx 0 0;
			box-sizing: border-box;
			min-width: 400rpx;
			.box_chima{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10rpx;
				.guige{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}
				.price{
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FF0000;
				}
			}
			.box_num{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 28rpx;
				.box_num_left{
					display: flex;
					flex-wrap: wrap;
					.guige{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
				
				.number{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
			.name {
				max-width: 340rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				margin-top: 6rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-align: justify;
				overflow: hidden;
				margin-top: 40rpx;
			}
			.cont {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #E80303;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-align: justify;
				overflow: hidden;
				padding-right: 20rpx;
				box-sizing: border-box;
			}
			.bom {
				min-width: 320rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 2rpx;
				.left {
					display: flex;
					align-items: center;
					text:nth-child(1) {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
					}
				}
				.right {
					font-size: 29rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ffffff;
					text-align: center;
					line-height: 24rpx;
					background: #fd8e1b;
					border-radius: 10rpx;
					padding: 16rpx 26rpx 16rpx 26rpx;
				}
			}
		}
	}

	.division-line {
		border-bottom: 1rpx solid #dfdfdf;
	}
}

.other {
	padding: 30rpx 20rpx 52rpx 20rpx;
	background: #fff;
	border-radius: 20rpx;

	.block {
		color: #333;
		display: flex;
		padding-bottom: 29rpx;

		.tit {
			flex: 1;
			line-height: 42rpx;
			font-weight: 700;
		}

		.txt {
			flex: 1;
			line-height: 42rpx;
			text-align: right;
			padding-right: 8rpx;
		}

		.img {
			margin-top: 3rpx;
			width: 12rpx;
			height: 23rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.pay_price {
		text-align: right;
		line-height: 50rpx;
		font-size: 30rpx;
		text{
			color: #FF0000;
			font-size: 42rpx;
		}
	}

	.jifen {
		width: 710rpx;
		margin: 0 auto;
		background: #fceee5;
		line-height: 75rpx;
		color: #ff6505;
		padding-left: 24rpx;
		border-radius: 10rpx;
		padding-top: 49rpx;
	}
}

.order-wrap {
	width: 710rpx;
	margin: 0 auto;
	background: #fff;
	padding: 20rpx 40rpx 20rpx 40rpx;
	color: #333;
	margin-bottom: 70rpx;
	box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.16);
	border-radius: 20rpx;

	.tit {
		font-size: 30rpx;
		line-height: 42rpx;
		font-weight: 700;
	}

	.block {
		display: flex;
		justify-content: space-between;
		padding-top: 34rpx;

		.txt {
			color: #000;
		}

		.fuz {
			padding-left: 29rpx;
			color: #ff6505;
			font-size: 30rpx;
		}
	}
}

.bottom-wrap {
	background: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 750rpx;
	min-height: 95rpx;
	padding: 10rpx 10rpx 0 0;

	.btn {
		box-sizing: border-box;
		height: 78rpx;
		line-height: 78rpx;
		text-align: center;
		color: #fff;
		background: #1bbefd;
		text-align: center;
		width: 210rpx;
		border-radius: 10rpx;
		float: right;
		margin-left: 42rpx;
		margin-right: 20rpx;
	}

	.btns {
		background: #fff;
		color: #333;
		border: 1rpx solid #707070;
	}
}
</style>
